<!DOCTYPE html>
<html>

	<head>
		<title>bootstrap资源分享站|分享人生,分享快乐</title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta name="description" content="资源分享">
		<meta name="author" content="popohum,tino1996">
		<link rel="stylesheet" type="text/css" href="./public/md/css/bootstrap.min.css">
		<link rel="stylesheet" type="text/css" href="./public/md/css/ripples.min.css">
		<link rel="stylesheet" type="text/css" href="./public/md/css/font-awesome.min.css">
		<link rel="stylesheet" type="text/css" href="./public/style/common.css">
		<!--[if lt IE 9]>
    <script src="//cdn.bootcss.com/html5shiv/3.7.2/html5shiv.min.js"></script>
    <script src="//cdn.bootcss.com/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
	</head>

	<body>
		<div id="header">
			<div class="container">
				<div class="row">
					<h1 class="logo">地球最好</h1>
					<h3 class="slogo">Earth-Best</h3>
				</div>
				<div class="row hidden-xs">
					<div class="col-xs-3 descript">
						Bootstrap@HTML交流分享
					</div>
					<div class="col-xs-6 search">
						<input type="text" name='sa' class="col-xs-11" placeholder='search' /> <i class='fa fa-search fa-lg'></i>
					</div>
					<div class="col-xs-3 login">
						<a href="#" class="btn btn-material-light-green-600">登录</a>
						<a href="#" class="btn btn-material-blue-400">注册</a>
					</div>
				</div>
				<div class="row">
					<div class="navbar-header">
						<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target="#bs-navbar" aria-controls="bs-navbar" aria-expanded="false">
							<span class="sr-only">Toggle navigation</span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
							<span class="icon-bar"></span>
						</button>
					</div>
					<nav id="bs-navbar" class="navbar-collapse collapse">
						<ul class="nav navbar-nav">
							<li class="">
								<a href="#"><i class="fa fa-home"></i> 全部 </a>
							</li>
							<li class="">
								<a href="#">Bootstrap</a>
							</li>
							<li class="">
								<a href="#">HTML</a>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle">CSS <i class="fa fa-caret-down"></i></a>
								<ul class="dropdown-menu">
									<li>
										<a href="#">CSS</a>
									</li>
									<li>
										<a href="#">LESS</a>
									</li>
									<li>
										<a href="#">SASS</a>
									</li>
								</ul>
							</li>
							<li class="dropdown">
								<a href="#" class="dropdown-toggle">JavaScript <i class="fa fa-caret-down"></i></a>
								<ul class="dropdown-menu" role="menu">
									<li class="">
										<a href="#">JQuery</a>
									</li>
									<li class="">
										<a href="#">CoffeeJS</a>
									</li>
									<li class="">
										<a href="#">BackboneJS</a>
									</li>
									<li>
										<a href="#">AngularJS</a>
									</li>
								</ul>
							</li>
							<li>
								<a href="#">PHP</a>
							</li>
							<li>
								<a href="#">JAVA</a>
							</li>
						</ul>
					</nav>
				</div>
			</div>
		</div>
		<div class="container">
			<div class="row">
				<div class="col-md-9 bg-info">
					<div class="info-base">
						<ul class="cate list-unstyled clearfix">
							<li class="active"><a href="#">最新发布</a></li>
							<li><a href="#">经验分享</a></li>
							<li><a href="#">疑难解答</a></li>
							<li><a href="#">资源分享</a></li>
							<li class="pull-right post-style"><a href="javascript:;"><i class="fa fa-th-large"></i></a></li>
							<li class="pull-right new-article"><a href="#" class="btn btn-success">发表新文章</a></li>
						</ul>
						<ul class="tag list-unstyled clearfix">
							<li><a href="#" class="badge">angularJS</a></li>
							<li><a href="#" class="badge">Bootstrap</a></li>
							<li><a href="#" class="badge">招聘</a></li>
							<li><a href="#" class="badge">HMTL预处理</a></li>
							<li><a href="#" class="badge badge-success"><i class="fa fa-plus"></i> 更多</a></li>
						</ul>

						<div class="post-list">
							<div class="post">
								<div class="post-head">
									<a href="#">Awesome Node.js development tools for 2015</a>
									<i class="fa fa-lg fa-commenting pull-right" title="热度">58</i>
								</div>
								<div class="post-content">
									<p>
									With the arrival of Node.js, creating a website in JavaScript is very easy and cost-effective. This framework brings a massive changeover in the web application development with the advanced push innovation instead of using old web sockets. With these
									beneficial aspects, [Node.js][2] is gaining popularity among web developers who aspire to develop their next website in this framework. …
									</p>
								</div>
								<div class="post-footer">
									<i class="fa fa-user"></i><a href="#"> popohum</a>
									<i class="fa fa-edit"></i><span>8-25 17:30</span>
									<i class="fa fa-reply"></i><span>8-25 18:00</span>
									<a href="#">angularJS</a> <a href="#">Bootstrap</a>
								</div>
							</div>
							<div class="post">
								<div class="post-head">标题2</div>
								<div class="post-content">简洁正文</div>
								<div class="post-footer">脚部</div>
							</div>
							<div class="post">
								<div class="post-head">标题3</div>
								<div class="post-content">简洁正文</div>
								<div class="post-footer">脚部</div>
							</div>
							<div class="post">
								<div class="post-head">标题4</div>
								<div class="post-content">简洁正文</div>
								<div class="post-footer">脚部</div>
							</div>
							<div class="post">
								<div class="post-head">标题5</div>
								<div class="post-content">简洁正文</div>
								<div class="post-footer">脚部</div>
							</div>
						</div>
					</div>
				</div>
				<!-- 右侧容器 -->
				<div class="col-md-3 side-base">
					<!-- TOP10 列表面板 -->
					<div class=" bg-info">
						<div class="info-base">
							<div class="info-tit">
								<i class="fa fa-list-ol"></i>&nbsp;TOP 10
							</div>
							<ol class="top10">
								<li><a href="#">fdafdsafdsafdsafdsafdsafdsafdsafasd</a></li>
								<li><a href="#">fdafdsafasd</a></li>
								<li><a href="#">fdafdsafasd</a></li>
								<li><a href="#">fdafdsafasd</a></li>
								<li><a href="#">fdafdsafasd</a></li>
								<li><a href="#">fdafdsafasd</a></li>
								<li><a href="#">fdafdfdsafdsafdsafdsafsdafdsasafasd</a></li>
								<li><a href="#">fdafdsadfsafdsafdsafdsafdsafdsafasd</a></li>
								<li><a href="#">fdafdsdfsafdsafdsafdsafdsaafasd</a></li>
								<li><a href="#">fdafddfafdsafdsafsdasafasd</a></li>
							</ol>
						</div>
					</div>
					<!-- 友情链接 面板 -->
					<div class=" bg-info">
						<div class="info-base">
							<div class="info-tit">
								<i class="fa fa-link"></i>&nbsp;友情连接
							</div>
							<div class="index-link">
								<a href="#"><img src="https://www.baidu.com/img/baidu_jgylogo3.gif" alt=""></a>
								<a href="#"><img src="http://static.zcool.com.cn/v3.5.150820.0/zcool/images/logo.png?v2" alt=""></a>
								<a href="#">11111</a>
								<a href="#">11111</a>
								<a href="#">11111</a>
							</div>
						</div>
					</div>
				</div>
				<!-- end 右侧容器 -->
			</div>
		</div>
		<div id="footer" class="text-center">
			CopyLeft 2015 Bootstrap@HTML5群(152842347) 版权部分所有，遵循 <a target="_blank" href="http://opensource.org/licenses/gpl-2.0.php">GNU GENERAL PUBLIC LICENSE v2</a> 授权使用 <a href="#">土豪请慷慨捐赠</a>
		</div>
		<script type="text/javascript" src="./public/jquery/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="./public/md/js/bootstrap.min.js"></script>
		<script type="text/javascript" src='./public/md/js/material.min.js'></script>
		<script type="text/javascript" src='./public/md/js/ripples.min.js'></script>
		<script type="text/javascript">
			$.material.init()
			 $(document).ready(function() {
				menuToggle();
				$(window).resize(function() {
					menuToggle();
				});
				$('.post-style>a').on('click', function() {
					if ($('.post .post-content').css('display') == 'none') {
						$(this).find('>i').addClass('fa-th-list').removeClass('fa-th-large');
						$('.post .post-content').css('display', 'block');
					} else {
						$(this).find('>i').removeClass('fa-th-list').addClass('fa-th-large');
						$('.post .post-content').css('display', 'none');
					}
				})
			});

			function menuToggle() {
				$('.dropdown').off('mouseover mouseleave');
				if ($('.navbar-toggle').css('display') == 'none') {
					$('.dropdown').on('mouseover', function() {
						$(this).find('>a>i').removeClass('fa-caret-down').addClass('fa-caret-up')
						$(this).find('>a').css({
							'padding-bottom': '11px',
							'border-bottom': '2px solid #7cb342',
							'margin-bottom': '2px'
						})
						$(this).find('.dropdown-menu').stop().slideDown("fast");
					});
					$('.dropdown').on('mouseleave', function() {
						$(this).find('>a>i').removeClass('fa-caret-up').addClass('fa-caret-down')
						$(this).find('>a').css({
							'padding-bottom': '15px',
							'border-bottom': 'none',
							'margin-bottom': '0px'
						})
						$(this).find('.dropdown-menu').stop().slideUp("fast");
					});
				}
			}
		</script>
	</body>

</html>
